<template>
  <div class="pagewrapper p-20">
    <div class="bg_fff pagebox h_full flex">
      <div class="pageleft flexcolumn h_full">
        <div class="p-16">
          <div class="flexbetween">
            <template v-if="!isRemove">
              <div class="c_text2 mb-16">分组</div>
              <div class="c_primary f-14 commhover mb-16" @click="handleDarg(true)">分组排序</div>
            </template>
            <template v-if="isRemove">
              <div class="c_text2 mb-16">移动分组
                <el-tooltip effect="dark" placement="top" content="移动排序实时生效" popper-class="commtooltip">
                  <svg-icon icon-class="iquestion" />
                </el-tooltip>
              </div>
              <div class="c_primary f-14 commhover mb-16" @click="handleDarg(false)">返回</div>
            </template>
          </div>
          <div class="flexbetween">
            <el-input
              v-model="search"
              size="small"
              placeholder="搜分组"
              suffix-icon="el-icon-search"
              class="searchinput"
            >
            </el-input>
            <div class="btnadd flexcenter commhover" @click="handleAdd">
              <el-tooltip
                class="item"
                effect="dark"
                content="添加一级分组"
                placement="top-start"
              >
                <i class="el-icon-plus f-16"></i>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="left_body">
          <div
            class="role_item commhover flexbetween f-14"
            v-for="(item, index) in roleList"
            :key="index"
            :class="{active: active == item.id}"
            @click="handleItem(item)"
          >
            <div class="flex aligncenter">
              <div class="role-title c_text f-14">{{ item.name }}</div>
              <span class="f-12 c_999">(0)</span>
            </div>
            <el-dropdown @command="handleCommand">
              <svg-icon icon-class="more" class-name="commhover roleicon f-15" />
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">新建子分组</el-dropdown-item>
                <el-dropdown-item command="b">编辑分组</el-dropdown-item>
                <el-dropdown-item command="c">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="pageright">
        <staff-table />
      </div>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="680px"
      :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="form" label-width="160px">
        <el-form-item label="分组名称：" prop="name">
          <el-input v-model="form.name" size="small" maxlength="10" placeholder="请输入分组名称，不超过10个字"></el-input>
        </el-form-item>
        <el-form-item label="可用席位数：" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">不限</el-radio>
            <el-radio :label="1">
              <el-input v-model="form.num" size="small" maxlength="10" @input="(e) => form.num= integerZeroFn(e)" placeholder="请输入" style="width:88px"></el-input>
              个
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="flex" v-if="form.status==1">
          <div class="infotitle pr-12 c_text3 f-14">说明：</div>
          <div>
            <div class="c_text3 f-14">1、子分组设置可用席位数的时候不判断所属父分组可用席位数。</div>
            <div class="c_text3 f-14">2、所有子分组下实际登录的企微号总数≤所属父分组可用席位数。</div>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import RoleMain from './RoleMain.vue'
import StaffTable from './StaffTable.vue'
export default {
  data() {
    return {
      isRemove:false,
      search:'',
      roleList: [
        { name: "管理员", id: 1 },
        { name: "成员", id: 2 },
      ],
      active:1,
      title:'',
      open:false,
      form:{
        name:"",
        status:0
      },
      rules:{
        name:[{ required: true, message: '请输入角色名称', trigger: 'blur' }]
      }
    };
  },
  components: {
    // RoleMain
    StaffTable
  },
  methods:{

    // 可移动
    handleDarg(type){
      this.isRemove = type
    },
    
    handleAdd(){
      this.title = '新建分组'
      this.open = true
    },

    handleClose(){
      this.open = false
    },

    handleCommand(command){
      // console.log(command)
      switch (command) {
        case 'a':
          this.handleAdd()
          break;
        case 'b':
          this.title = '编辑角色'
          this.open = true
          break;
        case 'c':
          this.handleDelete()
          break;
        default:
          break;
      }
    },

    handleDelete(){
      this.$confirm('确定删除该角色?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose:false,
        iconClass:'el-icon-warning-outline',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },

    handleSubmit(){
      this.$refs.form.validate(valid=>{
        if(!valid) return
      })
    },

    handleItem(item){
      this.active = item.id
    },
  }
};
</script>

<style lang="scss" scoped>
.pagebox {
  border-radius: 4px;
}
.pageleft {
  width: 300px;
  border-right: 1px solid #f0f0f0;
}
.left_body {
  height: calc(100% - 102px);
  overflow-y: auto;
  padding: 0 16px 16px 25px;
}
.searchinput {
  width: 222px;
  // margin-right: ;
}
.btnadd {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
}
.role_item {
  width: 100%;
  border-radius: 4px;
  position: relative;
  height: 40px;
  padding: 0 12px;
  padding-right: 6px;
  margin-bottom: 4px;

  &.active{
    background-color: #ebf2ff;
  }
  &:hover{
    background-color: #f0f0f0;
  }
  .roleicon{
    display: none;
  }

  &:hover .roleicon{
    display: inline;
  }
}
.role-title{
  max-width: 85%;
  white-space: nowrap;
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px;
}
.pageright{
  flex: 1;
  min-height: 100%;
  overflow: hidden;
  padding: 16px;
}
.role-header{
  height: 64px;
  border-bottom: 1px solid #e0e0e0;
}
.infotitle{
  width: 160px;
  text-align: right;
}
</style>